import React, { useEffect, useState, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import img2 from '../assets/images/编组 3@2x.png'
import { Button, message, Form, Input } from 'antd';
import '../assets/style/common/login.scss'
import { loginApi, loginMsgApi, loginYzmApi } from '../apis/modules/user';

import CanvasCaptcha from '../components/Canvans'

export default function Login() {
  const [way, setWay] = React.useState('password')
  const navigate = useNavigate()
  const [code, setCode] = useState('')
  const titleClick = (val) => {
    setWay(val)
  }
  const myRef = useRef()
  //验证码
  function changeNameCallback(params) {
    // 父传子函数，子返回修改参数
    setCode(params)
  }

  //表单登录
  const onFinish = (values) => {
    if (values.yzm == code) {
      loginApi(values).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          message.success(res.data.message || "登录成功")
          localStorage.token = res.headers.authorization
          localStorage.roles = JSON.stringify(res.data.data.roles)
          navigate('/nav/home')
        } else {
          message.error(res.data.message || "登录失败，账号或者密码有误")
        }
      }

      )
    } else {
      message.error("验证码错误")
    }

  }

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);

  };

  //短信登录，获取验证码
  const getPhoneMsg = () => {
    const phone = myRef.current.input.value
    console.log();
    loginYzmApi(phone).then((res) => {
      console.log(res);
    })
  }

  //手机短信登录
  const onFinish2 = (values) => {
    console.log('values:', values);
    // shortMsgApi(values).then((res)=>{
    //     console.log(res);
    // })

  };

  const onFinishFailed2 = (errorInfo) => {
    console.log('Failed:', errorInfo);

  };

  // useEffect(() => {

  //   console.log(code);
  // }, [code])

  const gotoReg = () => {
    navigate('/register')
  }
  return (
    <div className='login-bg'>
      <img src={img2} alt="" />
      <button className='close'>关闭</button>
      <div className='login_box'>
        <div className='pp'>
          <div className='login_way'>
            <span className={way === "password" ? 'login_way_color ' : ''}
              onClick={() => { titleClick('password') }}>账号密码登录<div className={way == 'password' ? 'actives' : ''}></div></span>
            <span className={way === "note" ? 'login_way_color ' : ""}
              onClick={() => { titleClick('note') }}>短信快捷登录<div className={way == 'note' ? 'actives' : ''}></div></span>
          </div>
          {/* 密码登录 */}
          <div className={way === 'password' ? 'password_pages' : 'hide'}>
            <Form className='froms'
              name="basic"
              labelCol={{
                span: 8,
              }}

              wrapperCol={{
                span: 16,
              }}

              initialValues={{
                remember: true,
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <div className="contents">
                <Form.Item className='userName inputs'
                  name="phone"
                  rules={[
                    {
                      required: true,
                      message: '请输入手机号/用户名',
                    },
                  ]}
                >
                  <Input placeholder='请输入手机号/用户名' maxLength={11} />
                </Form.Item>

                <Form.Item className='password inputs'
                  name="password"
                  rules={[
                    {
                      required: true,
                      message: '请输入密码',
                    },
                  ]}
                >
                  <Input placeholder='请输入密码' maxLength={11} type="password" />
                </Form.Item>

                <Form.Item className='yzm '
                  name="yzm"
                  rules={[
                    {
                      required: true,
                      message: '请输入验证码',
                    },
                  ]}
                >
                  <Input placeholder='请输入验证码' />

                </Form.Item>
                <CanvasCaptcha changeNames={changeNameCallback}
                ></CanvasCaptcha>
                <Form.Item
                  wrapperCol={{
                    offset: 8,
                    span: 16,
                  }}
                  className='btnStyle'
                >
                  <div className='line'></div>
                  <Button htmlType="submit" className='btnss' style={{ color: '#FFFFFF', marginBottom: "0px" }}>
                    登录
                  </Button>
                </Form.Item>
                <div className='login_ways register' >
                  <span onClick={gotoReg}>立即注册</span>
                  <span>忘记密码？</span>
                </div>
              </div>

            </Form>

            {/* <div className='userName inputs'><input type="text" placeholder='请输入手机号/用户名' /></div>
            <div className='yzm '><input type="text" placeholder='请输入验证码'/><button>获取验证码</button></div>
            <div className='btn'><button>登录</button></div>
            <div className='login_way register' ><span>立即注册</span>
              <span>忘记密码？</span>
            </div> * */}
          </div>
          {/* 短信登录 */}
          <div className={way === 'note' ? 'password_pages' : 'hide'}>
            <Form className='froms'
              name="basic"
              labelCol={{
                span: 8,
              }}

              wrapperCol={{
                span: 16,
              }}

              initialValues={{
                remember: true,
              }}
              onFinish={onFinish2}
              onFinishFailed={onFinishFailed2}
              autoComplete="off"
            >
              <div className="contents">
                <Form.Item className='userName inputs'
                  name="phone"
                  rules={[
                    {
                      required: true,
                      message: '请输入手机号/用户名',
                    },
                  ]}
                >
                  <Input placeholder='请输入手机号/用户名' maxLength={11} ref={myRef} />
                </Form.Item>
                <Form.Item className='yzmPhone  '
                  name="code"
                  rules={[
                    {
                      required: true,
                      message: '请输入验证码',
                    },
                  ]}
                >
                  <Input placeholder='请输入验证码' />

                </Form.Item>
                <div >
                  <Button className='getPhoneLogin' onClick={getPhoneMsg} style={{ color: '#FFFFFF', marginBottom: "0px" }}>获取验证码</Button>
                </div>
                <Form.Item
                  wrapperCol={{
                    offset: 8,
                    span: 16,
                  }}
                  className='btnStyle2'
                >
                  <div className='line'></div>
                  <Button htmlType="submit" className='btnss' style={{ color: '#FFFFFF', marginBottom: "0px" }}>
                    登录
                  </Button>
                </Form.Item>
                <div className='login_ways register' >
                  <span onClick={gotoReg}>立即注册</span>
                  <span>忘记密码？</span>
                </div>
              </div>

            </Form>




          </div>
        </div>
      </div>
    </div>
  )
}
